import React,{Component} from 'react';
import './orderlist.scss';
import {
  Link
} from 'react-router-dom';
import { payOrder, getOrderDetails } from 'api/order.js';
import { message } from 'antd'
export default class Orderlist extends Component{
	constructor(props){
    super(props)
    this.state = {
    	uorder_id: props.location.state.uorder_id,
    	order_id: props.location.state.order_id,
    	orderStatuCon: props.location.state.orderStatuCon,
    	ys: 'glyphicon-chec ch',
    	ys1:'glyphicon-nochec noch',
    	orderList: {},
    	goodsList: [],
    	pay_status: 0,
    	payment_channel: 2
    }
	}
	change1 = () => {
		this.setState({
			ys: 'glyphicon-chec ch',
			ys1: 'glyphicon-nochec noch',
			payment_channel: 2
		})
	}
	change2 = () => {
		this.setState({
			ys: 'glyphicon-nochec noch',
			ys1: 'glyphicon-chec ch',
			payment_channel: 4
		})
	}
	_getOrderDetails (num) {
		getOrderDetails({
			order_id:num
		}).then(res => {
			if (res.code === 1){
				this.setState({
					orderList:res.data,
					goodsList: res.data.goods
				})
			}
		})
	}
	_payOrder (num) {
		payOrder({
			uorder_id: num,
			payment_channel: this.state.payment_channel
		}).then(res => {
			if (res.code === 1){
				window.location.href = res.data
			} else {
				message.error(res.message, 2)
			}
		})
	}
	componentDidMount () {
		this._getOrderDetails(this.state.order_id);
	}
	render(){
		return(
			<div className="orderlist">
				<div className="orderlist_title">
					<Link to={
						{
							pathname: '/user/order',
							state:{pay_status: 0}
						}
					}><span className="glyphicon glyphicon-back"></span></Link>
					<p>订单详情</p>
				</div>
				<div className="order_address">
					<div>
						<div><span>收件人：</span><span>{this.state.orderList.order_receiver_name}</span><span>{this.state.orderList.order_receiver_contact}</span></div>
						<p>收货地址：{this.state.orderList.order_receiver_address}</p>
						{/*<div className="order_type">支付方式：{this.state.orderList.payment_channel}</div>*/}
					</div>
				</div>
				<div className="ordercard">
				<div className="card_title">
					<span>{this.state.orderList.shop_name}</span>
					<span>{this.state.orderList.orderStatuCon === '已完成' ? '交易成功' : this.state.orderList.orderStatuCon === '未确认收货' || this.state.orderList.orderStatuCon === '已签收' ? '待收货' : this.state.orderList.orderStatuCon === '待发货' | this.state.orderList.orderStatuCon === '等待发货' ? '待发货' : this.state.orderList.orderStatuCon}</span>
				</div>
				<div className="card_conent">
					{
						this.state.goodsList.map((item,index) => {
							return(
								<div key={index}>
									<img src={item.pic}/>
									<div>
										<p>{item.desc}</p>
										{
											parseInt (item.price) === 0 ?
											<span>面议</span>
											: <span>¥ {item.price}</span>
										}
										<span>数量：{item.num}件</span>
									</div>
								</div>
							)
						})
					}
					<p className="order_ord">订单总额：¥{this.state.orderList.order_payment_amount}(含运费：¥{this.state.orderList.order_shipping_fee})</p>
				</div>
				<div className="order_ord1">
					<p>订单编号：{this.state.orderList.order_id}</p>
					<p>下单时间：{this.state.orderList.order_create_time}</p>
					{
						this.state.orderStatuCon === '待付款' || this.state.orderStatuCon === '已取消' ? '' : <p>支付时间：{this.state.orderList.order_pay_time}</p>
					}
				</div>
			</div>
			{
				this.state.orderStatuCon === '待付款' ?
				<div>
					{<div className="zhifu">
						<div onClick={this.change1}>
							<span className="glyphicon glyphicon-zfb zfb"></span>
							支付宝支付
							<span className={`glyphicon ${this.state.ys}`}></span>
						</div>
						<div onClick={this.change2}>
							<span className="glyphicon glyphicon-weixin weixin"></span>
							微信支付
							<span className={`glyphicon ${this.state.ys1}`}></span>
						</div>
					</div>}
					<div className="zf">
						<span onClick={this._payOrder.bind(this, this.state.uorder_id)}>立即支付</span>
					</div>
				</div>

				: ''
			}
			</div>
		)
	}
}
